<template>
  <div class="container positionRelative">
    <view class="user-info flex alignCenter justifyBetween" :style="{ top: `${userInfoTop}px` }">
      <view class="opportunity flex alignCenter">
        <uv-avatar :src="counter.slParams.userInfo.logo" size="25"></uv-avatar>
        <text>{{counter.slParams.userInfo.nickName}}</text>
      </view>
      <view class="opportunity flex alignCenter fz14">
        <uv-avatar text="弹" bg-color="#1BC3E8" size="25" font-size="12"></uv-avatar>
        <text>{{bulletNum}}次机会</text>
      </view>
    </view>
    <view class="imageCenter">
      <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/11/14/17315864113743933.png" width="80vw" mode="widthFix"></uv-image>
    </view>
    <view id="navId">
      <uv-navbar title="弹幕星球" :titleStyle="titleStyle" autoBack bgColor="transparent" placeholder leftIconColor="#fff" rightIconColor="#fff"></uv-navbar>
    </view>
    <view class="barrage" :style="{ height: `${bulletChatContent}px` }">
      <!-- <barrage></barrage> -->
      <!-- 弹幕 -->
      <sv-danmaku ref="danmakuRef" :list="danmakuData" :showSend="false" :loop="true"></sv-danmaku>
    </view>
    <view class="actionBtn" id="actionBtnId">
      <uv-input @confirm="send" placeholder="发送弹幕" color="#fff" placeholderStyle="color:'#957ADA'" v-model="msg" :customStyle="sendStyle">
        <template v-slot:prefix>
          <uv-image src="https://cos.qcshejiao.com/qc/xcxui/ig/83502.png" width="20px" height="20px"></uv-image>
        </template>
      </uv-input>
    </view>
  </div>
</template>

<script setup lang="ts">
import svDanmaku from "@/uni_modules/sv-danmaku/components/sv-danmaku/sv-danmaku.vue";
import barrage from "@/pages/tabbar/tabbar-1/components/barrage.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let bulletNum = ref(0); //弹幕数量
let bulletChatContent = ref(0);
let danmakuData = ref([]);
let titleStyle = computed(() => {
  return { color: "#fff" };
});
let sendStyle = computed(() => {
  return {
    borderColor: "#3C3154 !important",
    borderRadius: "20px",
  };
});

let userInfoTop = computed(() => {
  // #ifdef MP-WEIXIN
  return counter.navBarHeight + 15;
  // #endif

  // #ifdef H5
  return 44 + 15;
  // #endif
});

onMounted(() => {
  getBarrage();
  getBarrageCount();
  nextTick(() => {
    setCss();
  });
});

let msg = ref("");

//获取弹幕数量
async function getBarrageCount() {
  bulletNum.value = await proxy.$apis.getSendBarrageCount();
}

let send = async () => {
  await proxy.$apis.sendBarrage({ textContent: msg.value });
  getBarrageCount();
  getBarrage();
  msg.value = "";
  proxy.$utils.showToast("发送成功");
};

async function setCss() {
  if (counter.slParams.bulletChatContent) {
    bulletChatContent.value = counter.slParams.bulletChatContent;
  }
  let actionBtnTop = await viewInfo("#actionBtnId", "top");
  let navIdHieght = await viewInfo("#navId", "height");
  bulletChatContent.value = Number(actionBtnTop) - Number(navIdHieght);
  counter.setRelease("bulletChatContent", bulletChatContent.value);
  console.log("弹幕的高度", bulletChatContent.value);
}

let getBarrage = async () => {
  //获取弹幕数据
  console.log("弹幕数据", counter.slParams.danmakuData);
  if (counter.slParams.danmakuData && counter.slParams.danmakuData.length) {
    danmakuData.value = counter.slParams.danmakuData;
  }
  let data = await counter.getBarrage("");
  counter.setRelease("danmakuData", data);
  danmakuData.value = proxy.$utils.shuffle(data);

  //注册弹幕点击事件
  setTimeout(() => {
    instance.refs.danmakuRef.createTimer();
    uni.$on("e-danmaku-click", (e) => {
      if (e.id) {
        //counter.bulletChat = e;
        //instance.refs.popup.open();
      }
    });
  }, 300);
};

//获取页面元素信息
function viewInfo(id, type) {
  return new Promise((resolve, reject) => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select(id)
      .boundingClientRect((data) => {
        if (data) {
          resolve(data[type]);
        } else {
          resolve(0);
        }
      })
      .exec();
  });
}
</script>


<style lang="scss">
page {
  // background-color: #201a24;
  background: url("https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/11/13/17314834734512685.png");
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center; /* 背景图片居中 */
}
</style>
<style lang="scss" scoped>
.container {
  padding-bottom: 75px;
}
.imageCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.actionBtn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px 15px 25px;
}
.user-info {
  position: absolute;
  right: 15px;
  top: 55px;
  left: 15px;
  .opportunity {
    background-color: #2a2140;
    border: 1px solid #665f75;
    padding: 5px 10px;
    border-radius: 20px;
    text {
      margin-left: 10px;
      color: white;
    }
  }
}
</style>






